<template>
    <!--学生端学生考试信息详情(根据登录学生id)(score.vue里的详情的弹出层)-->
    <el-dialog title="学生考试信息详情" v-model="cardDetailVisible" :close-on-click-modal="false">
        <el-form label-width="100px" :model="cardDetail" ref="cardDetail">
            <div style="overflow: auto; width: 100%;">
                <table class="border-table">
                    <tr>
                        <td class="spec alt">学生学号</td>
                        <td>{{cardDetail.studentId}}</td>
                        <td class="alt">学生姓名</td>
                        <td>{{cardDetail.studentName}}</td>
                        <td class="alt">学生性别</td>
                        <td>{{cardDetail.studentSex}}</td>
                    </tr>
                    <tr>
                        <td class="spec alt">学生民族</td>
                        <td>{{cardDetail.studentNation}}</td>
                        <td class="alt">学习课程</td>
                        <td>{{cardDetail.courseName}}</td>
                        <td class="alt">所属院校</td>
                        <td>{{cardDetail.studentGraduate}}</td>
                    </tr>
                    <tr>
                        <td class="spec alt">点播课件分数</td>
                        <td>{{cardDetail.scorePlay}}</td>
                        <td class="alt">在线考试分数</td>
                        <td>{{cardDetail.scoreOntime}}</td>
                        <td class="alt">章节测试分数</td>
                        <td>{{cardDetail.scoreTest}}</td>

                    </tr>
                    <tr>
                        <td class="spec alt">结业考试分数</td>
                        <td>{{cardDetail.scoreExam}}</td>
                        <td class="alt">总成绩</td>
                        <td>{{cardDetail.score}}</td>
                        <td class="alt">成绩录入时间</td>
                        <td>{{cardDetail.strScoreCreateDate}}</td>
                    </tr>

                    <tr>
                        <td class="spec alt">录入成绩人</td>
                        <td>{{cardDetail.modifyPerson}}</td>
                    </tr>
                </table>
            </div>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click.native="cardDetailVisible = false">确定</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import { getStuDetailScore } from '../api/api';
    export default {
        data() {
            return {
                cardDetailVisible:false,
                queryLoading:false,
                cccccc:11,
                cardDetail: {
                    studentId:'',
                    studentName:'',
                    studentSex:'',
                    studentNation:'',
                    courseName:'',
                    studentGraduate:'',
                    scorePlay:'',
                    scoreOntime:'',
                    scoreTest:'',
                    scoreExam:'',
                    score:'',
                    strScoreCreateDate:'',
                    modifyPerson:''
                }

            }
        },
        methods: {
            //格式化计算GPRS流量值
            formatGprsVal(arg,unit){
                var gprs = parseFloat(arg);
                if (isNaN(gprs)) {
                    return;
                }
                if(unit=='m' || unit=='M'){
                    gprs = gprs * 1024;
                }
                var tmpRs = gprs /1024;
                if(tmpRs<1){
                    gprs = Math.round(gprs*100)/100;
                    return gprs + "KB";
                }
                gprs = tmpRs;
                tmpRs = gprs /1024;
                if(tmpRs<1){
                    gprs = Math.round(gprs*100)/100;
                    return gprs + "MB";
                }
                gprs = tmpRs;
                tmpRs = tmpRs /1024;
                if(tmpRs<1){
                    gprs = Math.round(gprs*100)/100;
                    return gprs + "GB";
                }
            },
            showStuDetailScore(row) {
                //AJAX异步去数据库查询卡号详细信息
                let para = {studentId:row.studentId};
                getStuDetailScore(para).then((res) => {
                    //this.queryLoading = false;
                    let { msg, code } = res;
                if (code !== 0) {
                    //this.queryLoading = false;
                    this.$message({
                        message: "学生考试成绩详情",
                        type: 'success'
                    });
                } else {
                    this.cardDetail=res.resData;
                }
                this.cardDetail=res.resData;
            });
                this.cardDetailVisible=true;
            }
        }
    }

</script>
<style scoped>
    .el-col {
        border-radius: 0px;
        border:1px solid #d3dce6;
    }
    .bg-purple-dark {
        background: red;
    }
    .bg-purple {
        background: #FFF;
    }
    .bg-purple-light {
        color: #009966;
        min-height: 36px;
        line-height:36px;
    }
    .grid-content {
        border-radius: 0px;
        border:0px;
        min-height: 36px;
        line-height:36px;
    }
    .row-bg {
        padding: 10px 0;
        background-color: red;
    }

    .border-table {
        border-collapse: collapse;
        border: none;
        width: 100%;
    }
    .border-table td {
        border: solid #dfe8ec 1px;
        background: #fff;
        font-size:14px;
        padding: 6px 6px 6px 12px;
        color: #009966;
        line-height:28px;
    }
    td.alt {
        background: #EFF2F7;
        color:#8492A6;
    }
</style>